<template>
  <div class="enterpriseBox">
    <div class="content_box productList">
      <div
        class="item"
        v-for="item in productList"
        :key="item.companyFinancingId"
        @click="
          $router.push({
            path: `/finance/financeCaseDetail?`,
            query: { companyFinancingId: item.companyFinancingId },
          })
        "
      >
        <div class="label">
          <PublicImage 
            v-if="!item.companyLogo"
            :src="require('@/assets/image/finance/product_dj.png')">
          </PublicImage>
          <PublicImage 
            v-else
            :src="item.companyLogo">
          </PublicImage>
        </div>
        <div class="content">
          <div class="textBox">
            <div class="textLeft">
              <div class="ft">{{ item.firstStr }}</div>
              <div class="letext">{{ item.companyName }}</div>
            </div>
            <div class="textRight">{{ item.financingMoney }}万</div>
          </div>
          <div class="titleBox"></div>
          <div class="textRig">
            <div class="textLeft">
              融资轮次：{{ getTurnVal(item.financingTurnVal) }}
            </div>
            <div class="textRight">
              {{ getStatusVal(item.financingStatusVal) }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFinancingSuccessList } from "@/common/api/index.js";
import { host } from "@/utils/config.js";

export default {
  props: {
    pagesize: {
      type: Number,
      default: 6,
    },
  },
  data() {
    return {
      productList: [],
      typeList: [],
      statusList: [],
    };
  },
  computed: {
    getTurnVal() {
      return function (data) {
        let turnList = this.typeList;
        let obj = turnList.find((item) => item.dictValue == data);
        return obj && obj.dictLabel;
      };
    },
    getStatusVal() {
      return function (data) {
        let turnList = this.statusList;
        let obj = turnList.find((item) => item.dictValue == data);
        return obj && obj.dictLabel;
      };
    },
  },
  methods: {
    // 发送请求
    async getFinancingSuccessList() {
      let res = await getFinancingSuccessList();
      console.log("res", res);
      if (this.pagesize != 6) {
        this.productList = res.data.financingList.splice(2, 3);
        console.log("this.productList", this.productList);
      } else {
        this.productList = res.data.financingList;
      }
    },
    async gettypeList() {
      let api = `finance_financing_turn,finance_com_financing_status`;
      // 调用公共方法中的查询字典表
      this.getDictList(this, api).then((res) => {
        //  融资的轮次
        this.typeList = res.finance_financing_turn;
        //  融资状态
        this.statusList = res.finance_com_financing_status;
      });
    },
  },
  mounted() {
    this.getFinancingSuccessList();
    this.gettypeList();
  },
};
</script>

<style lang="scss" scoped>
.enterpriseBox {
  width: 1200px;
  margin: 30px auto 0;
  .content_box {
    flex-wrap: wrap;
    margin-top: 30px;
    background: none;
    display: flex;
    .item {
      width: 366px;
      height: 300px;
      border: 1px solid #eee;
      margin-bottom: 20px;
      background: #fff;
      -webkit-box-shadow: 4px 6px 5px 0 rgb(0 19 39 / 4%);
      box-shadow: 4px 6px 5px 0 rgb(0 19 39 / 4%);
      cursor: pointer;
      .label {
        height: 150px;
        background: #f4f4f4;
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
      .content {
        display: flex;
        flex-direction: column;
        text-align: left;
        margin: 20px 0 20px 20px;
        box-sizing: border-box;
        .titleBox {
          margin-top: 30px;
          font-size: 14px;
          color: #333;
        }
        .textBox {
          display: flex;
          color: #999;
          font-size: 18px;
          justify-content: space-between;
          .textLeft {
            color: #333333;
            font-weight: bold;
            .ft {
              width: 190px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .letext {
              width: 190px;
              word-break: keep-all;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .textLeft div:last-child {
            font-weight: 400;
          }
          .textRight {
            flex: 1;
            text-align: center;
            color: #ef6c22;
            font-weight: bold;
          }
        }
        .textRig {
          display: flex;
          color: #999;
          justify-content: space-between;
          .textRight {
            width: 170px;
          }
          span:last-child {
            margin-left: 20px;
          }
        }
      }
    }
    .item:nth-child(3n + 2) {
      margin: 0 50px;
    }
  }
}
</style>